<template>
    <!--服务管理-->
    <div class="doctorservermanage">
        <div class="addManag">
            <h4 class="tt">
                <Button class="edit-btn" type="primary" v-if="!editFlag" @click="editFlag = true">
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>编辑
                </Button>
                <Button class="edit-btn" v-if="editFlag" @click="editFlag = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </h4>
            <div class="fuwu">
                <!-- 医生服务-->
                <div class="select_wufu" ref="all">
                    <template v-if="editFlag">
                        <div  v-for="(item,index) of allServerList" :key='index'>
                            <Checkbox v-model="item.flag">{{ item.roleName }}</Checkbox>
                        </div>
                    </template>
                    <template v-if="!editFlag">
                        <div v-if="item.selected == 1" v-for="(item,index) of allServerList" :key='index'>
                            <label :for="'a' + item.id">{{ item.roleName }}</label>
                        </div>
                    </template>
                </div>
            </div>
            <!--保存-->
            <div class="expert_save">
                <Button class="btn" type="primary" v-if="editFlag" @click="navto" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="reback" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
                </Button>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            allServiceList: [],
            roleList: [],
            id: null,
            pageNo: 1,
            searchKey: "",
            editFlag: false,
        };
    },
    created() {      
        this.pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "账号管理"
            },
            {
                path: "/index/configuration/admin/user/list",
                title: "账号管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted(){
        this.id = this.$route.query.id;
        this.getRoleIDs()
        //获取全部角色
        this.$axios.post(api.findRoleList,{}).then(resp => {
            if (resp.data.code == 1) {
                let tmpData = resp.data.object;
                this.allServiceList = tmpData;
                for (let i = 0; i < this.allServiceList.length; i++) {
                    //循环child对比id
                    let index = this.roleList.indexOf(
                        this.allServiceList[i].id
                    );
                    if (index != -1) {
                        this.allServiceList[i].selected = 1;
                        this.allServiceList[i].flag = true
                    } else {
                        this.allServiceList[i].selected = 0;
                        this.allServiceList[i].flag = false
                    }                                        
                }
            }
        }).catch(err => {
            console.log(err);
        });       
    },
    methods: {
        //获取已配置的角色
        getRoleIDs(){
            let param = {};
            param.userId = this.id;
            this.$axios.post(api.findRoleIdsByUserId, param).then(resp => {
                    this.roleList = resp.data.object;
                }).catch(err => {
                    console.log(err);
                });
        },
        //保存用户角色配置 
        navto() {
            let arr = [];
            // 循环已操作的数据 找出已经选中数据的ID
            this.allServerList.forEach(item =>{
                if(!item){
                    return
                }else{
                    if(Boolean(item.flag)) {
                        arr.push(item.id)
                    }
                }
            })                      
            this.$axios
                .post(api.saveUserRole, {
                    userId: parseInt(this.id),
                    roleIds: arr
                })
                .then(res => {
                    if (res.data.success) {
                        this.$Message.info("保存成功");
                        this.editFlag = false
                        this.getRoleIDs()
                    }
                });
        },
        reback() {
            //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/admin/user/list",
                {
                    pageNo: this.pageNo,
                }
            );
        }
    },
    computed: {
        allServerList() {
            for (let i = 0; i < this.allServiceList.length; i++) {
                //循环获取选中id 的状态
                let index = this.roleList.indexOf(
                    this.allServiceList[i].id
                );
                if (index != -1) {
                    this.allServiceList[i].selected = 1;
                    this.allServiceList[i].flag = true
                } else {
                    this.allServiceList[i].selected = 0
                    this.allServiceList[i].flag = false
                }
            }
            return this.allServiceList;
        }
    }
};
</script>

<style scoped lang="less">
.doctorservermanage {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .addManag {
        display: flex;
        flex-direction: column;
        padding: 20px;
        .tt {
            font-size: 22px;
            font-weight: 700;
            line-height: 32px;
            width: 100%;
            .edit-btn {
                float: right;
            }
        }
        .fuwu {
            width: calc(100% - 100px);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid rgb(242, 242, 242);
            .select_wufu {
                margin: 0 30px;
                display: flex;
                flex-direction: row;
                padding: 0 20px;
                align-items: center;
                flex-wrap: wrap;
                div {
                    width: 20%;
                    margin: 10px 20px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    input {
                        outline: none;
                        border: none;
                    }
                }
            }
        }
        .expert_save {
            width: 200px;
            height: 50px;
            margin: 10px auto;
            .btn{
                margin: 0 auto;
            }
        }
    }
}
</style>